<!--  -->
<template>
  <div class="" style="height: 400px;">
    <el-table ref="table" height="100%" :data="tableData" style="width: 100%" class="elt-custom-table"
      @mouseover.native="stopScroll" @mouseout.native="startScroll">
      <!-- 表格列定义 -->
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      tableData: [
        {
          date: "1",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "3",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "4",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        }, {
          date: "5",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "6",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "7",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        }, {
          date: "8",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "9",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "10",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      scrollConfig: {
        timer: null,      // 定时器
        rowHeight: 44,    // 单行高度
        scrollSpeed: 30,  // 滚动速度(ms)
        scrollDistance: 0   // 滚动距离
      },
    };
  },
  computed: {

  },
  created() { },
  mounted() {
    this.startScroll()
  },
  methods: {
    startScroll() {
      const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper')
      if (!tableBody) return
      if (tableBody.scrollHeight < tableBody.clientHeight) {
        return
      }
      if (this.scrollConfig.timer) return
      this.scrollConfig.timer = setInterval(() => {

        this.scrollConfig.scrollDistance += 1

        if (this.scrollConfig.scrollDistance >= this.scrollConfig.rowHeight) {
          const firstRow = this.tableData.shift()
          this.tableData.push(firstRow)
          this.scrollConfig.scrollDistance = 0
          tableBody.scrollTop = 0
        } else {
          tableBody.scrollTop = this.scrollConfig.scrollDistance
        }
      }, this.scrollConfig.scrollSpeed)
    },
    stopScroll() {
      if (this.scrollConfig.timer) {
        clearInterval(this.scrollConfig.timer)
        this.scrollConfig.timer = null
      }
    }
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类样式</style>